<script setup>
import {computed, ref} from 'vue'
import {useStore} from 'vuex'

const store = useStore()
const userData = computed(() => store.state.data)
const form = ref({...userData.value})
const readOnly = ref(true)

const toggleEdit = async () => {
  readOnly.value = !readOnly.value
  if (readOnly.value) {
    await store.dispatch('updateProfile', form.value)
  }
}

const employmentStatusOptions = [
  {label: '在职', value: '在职'},
  {label: '退休返聘', value: '退休返聘'},
  {label: '离职', value: '离职'}
]

const educationOptions = [
  {label: '大学专科', value: '大学专科'},
  {label: '大学本科', value: '大学本科'},
  {label: '硕士研究生', value: '硕士研究生'},
  {label: '博士研究生', value: '博士研究生'}
]

const highestDegreeOptions = [
  {label: '学士', value: '学士'},
  {label: '硕士', value: '硕士'},
  {label: '博士', value: '博士'}
]

const academicOriginOptions = [
  {label: '本校', value: '本校'},
  {label: '外校（境内）', value: '外校（境内）'},
  {label: '外校（境外）', value: '外校（境外）'}
]
</script>

<template>
  <el-card class="profile-card">
    <el-form :model="form" label-width="120px">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="姓名">
            <el-input v-model="form.name" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别">
            <el-input v-model="form.gender" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="出生日期">
            <el-date-picker
                v-model="form.birthDate"
                :disabled="readOnly"
                format="YYYY-MM"
                type="month"
                value-format="YYYY-MM"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职日期">
            <el-date-picker
                v-model="form.entryDate"
                :disabled="readOnly"
                format="YYYY-MM"
                type="month"
                value-format="YYYY-MM"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="学历">
            <el-select v-model="form.education" :disabled="readOnly" placeholder="请选择">
              <el-option
                  v-for="option in educationOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最高学位">
            <el-select v-model="form.highestDegree" :disabled="readOnly" placeholder="请选择">
              <el-option
                  v-for="option in highestDegreeOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="职称">
            <el-input v-model="form.professionalTitle" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业类别">
            <el-input v-model="form.subjectCategory" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="任职状态">
            <el-select v-model="form.employmentStatus" :disabled="readOnly" placeholder="请选择">
              <el-option
                  v-for="option in employmentStatusOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="政治面貌">
            <el-input v-model="form.politicalStatus" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国籍">
            <el-input v-model="form.nationality" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="教学类型">
            <el-input v-model="form.teachingType" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="专业名称">
            <el-input v-model="form.majorName" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="专业代码">
            <el-input v-model="form.majorCode" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="教学年限">
            <el-input v-model="form.teachingYears" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input v-model="form.phone" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号">
            <el-input v-model="form.idcard" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="紧急联系人">
            <el-input v-model="form.emergencyContacts" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系电话">
            <el-input v-model="form.emergencyPhone" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="学缘信息">
            <el-select v-model="form.academicOrigin" :disabled="readOnly" placeholder="请选择">
              <el-option
                  v-for="option in academicOriginOptions"
                  :key="option.value"
                  :label="option.label"
                  :value="option.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="16">
        <el-col :span="24">
          <el-form-item label="家庭住址">
            <el-input v-model="form.address" :disabled="readOnly"/>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="toggleEdit">
          {{ readOnly ? '修改' : '保存' }}
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.profile-card {
  max-width: 850px;
  margin:  auto;
  padding: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
